<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>css3 动画</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<style type="text/css">
			@keyframes myfirst{
				from {
					background: red;
					left: 0px;
					top: 40px;
					border-radius: 0;
					transform:rotate(0deg);
				}
				to {
					background: blue;
					left: 300px;
					top: 200px;
					border-radius: 50%;
					transform:rotate(360deg);
				}
			}
			.dong{
				animation: myfirst 2s linear 0s infinite alternate;	
			}
			/**
			 * animation-name	规定需要绑定到选择器的 keyframe 名称。。
			 * animation-duration	规定完成动画所花费的时间，以秒或毫秒计。
			 * animation-timing-function	规定动画的速度曲线。
			 * animation-delay	规定在动画开始之前的延迟。
			 * animation-iteration-count	规定动画应该播放的次数。
			 * animation-direction	规定是否应该轮流反向播放动画。
			 * **/
			.pause {
				animation-play-state: paused;
			}
			.big_box{
				width: 100px;
				height: 100px;
				background: red;
				text-align: center;
				line-height: 100px;
				position: absolute;
				left: 0px;
				top: 40px;
			}
		</style>
	</head>
	<body>
		<div class="big_box">一个盒子</div>
		<button class="button1">开始</button>
		<button class="button2">暂停</button>		
	</body>
	<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
	<script type="text/javascript">
		$(".button2").attr("disabled",true);
		$(".button1").on("click.animation",function(){
			$(".big_box").addClass("dong");
			$(".button2").attr("disabled",false);
		})
		$(".button2").on("click.pause",function(){
			$(".big_box").toggleClass("pause");
		})
		
	</script>
</html>
